<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增医废 报模版 配置')"/>
    <th:block th:include="include :: editormd-css"/>
</head>
<body class="white-bg">

<div class="btns">
    <button class="bisync-btn">Bisynchronous (Default)</button>
    <button class="single-btn">Single</button>
    <button class="disabled-btn">Disabled</button>

    <button id="watch-btn">Enable watch</button>


    <button id="get-code-btn">获取代码</button>
    <button id="unwatch-btn">Unwatch</button>
    <button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button>
    <button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>

    </select>&nbsp;&nbsp;Themes :
    <select id="themes">
        <option selected="selected" value="">select themes</option>
    </select>
</div>
<div id="test-editormd">
    <textarea name="content" style="display:none;"></textarea>
</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: editormd-js"/>
<script type="text/javascript">
    var prefix = ctx + "yf/reports"
    var testEditor;

    $(".bisync-btn").click(function () {
        testEditor.config("syncScrolling", true);
    });
    $("#watch-btn").click(function(){
        testEditor.watch();
    });

    $(".single-btn").click(function () {
        testEditor.config("syncScrolling", "single");
    });

    $(".disabled-btn").click(function () {
        testEditor.config("syncScrolling", false);
    });

    $("#watch-btn").bind('click', function() {
        testEditor.watch();
    });

    $("#unwatch-btn").bind('click', function() {
        testEditor.unwatch();
    });

    $("#preview-btn").bind('click', function() {
        testEditor.previewing();
    });


    var testEditor;

    function getCodeValue() {
        return (localStorage.modeName) ? $("#" + localStorage.modeName.replace("text/", "").replace("c/c++", "cpp") + "-code").val() : $("#test-editormd").val();
    }

    $(function () {
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 720,
            watch: false,
//            toolbar: false,
//            codeFold: true,
//            searchReplace: true,
            mode:"text/json",
//            placeholder: "Enjoy coding!",
//            value: getCodeValue(),
//            theme: (localStorage.theme) ? localStorage.theme : "default",
//            mode: (localStorage.mode) ? localStorage.mode : "text/html",
            path: '../../ajax/libs/editor/Markdown/lib/'
        });

        $("#get-code-btn").bind("click", function () {
            alert(testEditor.getValue());
        });

        $("#fullscreen-btn").bind("click", function () {
            testEditor.fullscreen();
        });

        var select = $("#themes");

        for (var i = 0, len = editormd.themes.length; i < len; i++) {
            var theme = editormd.themes[i];
            var selected = (localStorage.theme == theme) ? " selected=\"selected\"" : "";
            select.append("<option value=\"" + theme + "\"" + selected + ">" + theme + "</option>");
        }

        select.change(function () {
            var theme = $(this).val();

            if (theme == "") {
                alert("theme == \"\"");
                return false;
            }

            localStorage.theme = theme;
            testEditor.setTheme(theme);
        });

        var modesSelect = $("#modes");
        var modeNames = ["text/html", "javascript", "php", "text/xml", "text/json", "java", "actionscript", "perl", "go", "python", "c/c++", "css", "ruby"];
        var modes = ["text/html", "javascript", "php", "text/xml", "text/json", "clike", "javascript", "perl", "go", "python", "clike", "css", "ruby"];

        for (var i = 0, len = modes.length; i < len; i++) {
            var mode = modes[i];
            var selected = (localStorage.modeName == modeNames[i]) ? " selected=\"selected\"" : "";
            modesSelect.append("<option value=\"" + mode + "\"" + selected + " name=\"" + modeNames[i] + "\"" + selected + ">" + modeNames[i] + "</option>");
        }

        modesSelect.change(function () {
            var mode = $(this).val();
            var modeName = $(this).find("option:selected").attr("name");

            if (mode == "") {
                alert("mode == \"\"");
                return false;
            }

            localStorage.mode = mode;
            localStorage.modeName = modeName;

            var code = getCodeValue();

            testEditor.setCodeMirrorOption("mode", mode);
            //testEditor.setCodeMirrorOption("value", code);
            testEditor.setValue(code);
        });
    });


</script>
</body>
</html>